import { ref, watch } from 'vue'

export type Theme = 'light' | 'dark'

// 主题状态
const currentTheme = ref<Theme>('light')

// 主题样式变量
const themes = {
  light: {
    '--el-bg-color': '#ffffff',
    '--el-bg-color-page': '#f5f5f5',
    '--el-bg-color-overlay': '#ffffff',
    '--el-text-color-primary': '#303133',
    '--el-text-color-regular': '#606266',
    '--el-text-color-secondary': '#909399',
    '--el-text-color-placeholder': '#a8abb2',
    '--el-text-color-disabled': '#c0c4cc',
    '--el-border-color': '#e4e7ed',
    '--el-border-color-light': '#ebeef5',
    '--el-border-color-lighter': '#f2f6fc',
    '--el-border-color-extra-light': '#f5f7fa',
    '--el-border-color-dark': '#d4d7de',
    '--el-border-color-darker': '#cdd0d6',
    '--el-fill-color': '#f0f2f5',
    '--el-fill-color-light': '#f5f7fa',
    '--el-fill-color-lighter': '#fafafa',
    '--el-fill-color-extra-light': '#fafcff',
    '--el-fill-color-dark': '#ebedf0',
    '--el-fill-color-darker': '#e6e8eb',
    '--el-fill-color-blank': '#ffffff',
    '--el-box-shadow': '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)',
    '--el-box-shadow-light': '0px 0px 12px rgba(0, 0, 0, 0.12)',
    '--el-box-shadow-base': '0px 2px 4px rgba(0, 0, 0, 0.12), 0px 0px 6px rgba(0, 0, 0, 0.04)',
    '--el-box-shadow-dark': '0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.06)',
  },
  dark: {
    '--el-bg-color': '#1d1e1f',
    '--el-bg-color-page': '#0a0a0a',
    '--el-bg-color-overlay': '#1d1e1f',
    '--el-text-color-primary': '#e5eaf3',
    '--el-text-color-regular': '#cfd3dc',
    '--el-text-color-secondary': '#a3a6ad',
    '--el-text-color-placeholder': '#8d9095',
    '--el-text-color-disabled': '#6c6e72',
    '--el-border-color': '#4c4d4f',
    '--el-border-color-light': '#414243',
    '--el-border-color-lighter': '#363637',
    '--el-border-color-extra-light': '#2b2b2c',
    '--el-border-color-dark': '#58585b',
    '--el-border-color-darker': '#636466',
    '--el-fill-color': '#2b2b2c',
    '--el-fill-color-light': '#262727',
    '--el-fill-color-lighter': '#1d1e1f',
    '--el-fill-color-extra-light': '#191a1b',
    '--el-fill-color-dark': '#36373a',
    '--el-fill-color-darker': '#3b3c3f',
    '--el-fill-color-blank': '#1d1e1f',
    '--el-box-shadow': '0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72)',
    '--el-box-shadow-light': '0px 0px 12px rgba(0, 0, 0, 0.72)',
    '--el-box-shadow-base': '0px 2px 4px rgba(0, 0, 0, 0.72), 0px 0px 6px rgba(0, 0, 0, 0.24)',
    '--el-box-shadow-dark': '0px 4px 8px rgba(0, 0, 0, 0.72), 0px 2px 4px rgba(0, 0, 0, 0.36)',
    // Element Plus 颜色主题变量
    '--el-color-primary': '#409eff',
    '--el-color-primary-light-3': '#79bbff',
    '--el-color-primary-light-5': '#a0cfff',
    '--el-color-primary-light-7': '#c6e2ff',
    '--el-color-primary-light-8': '#d9ecff',
    '--el-color-primary-light-9': '#ecf5ff',
    '--el-color-primary-dark-2': '#337ecc',
    '--el-color-success': '#67c23a',
    '--el-color-warning': '#e6a23c',
    '--el-color-danger': '#f56c6c',
    '--el-color-error': '#f56c6c',
    '--el-color-info': '#909399'
  }
}

export function useTheme() {
  // 应用主题
  const applyTheme = (theme: Theme) => {
    const root = document.documentElement
    const themeVars = themes[theme]
    
    Object.entries(themeVars).forEach(([property, value]) => {
      root.style.setProperty(property, value)
    })
    
    // 添加主题类名到body
    document.body.className = document.body.className.replace(/theme-\w+/g, '')
    document.body.classList.add(`theme-${theme}`)
    
    currentTheme.value = theme
  }

  // 切换主题
  const setTheme = (theme: Theme) => {
    applyTheme(theme)
    localStorage.setItem('theme', theme)
  }

  // 获取当前主题
  const getTheme = (): Theme => currentTheme.value

  // 初始化主题
  const initTheme = () => {
    const savedTheme = localStorage.getItem('theme') as Theme || 'light'
    applyTheme(savedTheme)
  }

  // 自动主题切换
  const setupAutoTheme = () => {
    const hour = new Date().getHours()
    const theme = (hour >= 6 && hour < 18) ? 'light' : 'dark'
    if (theme !== currentTheme.value) {
      setTheme(theme)
    }
    return theme
  }

  // 监听系统主题变化
  const watchSystemTheme = () => {
    if (window.matchMedia) {
      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
      
      const handleThemeChange = (e: MediaQueryListEvent) => {
        const autoTheme = localStorage.getItem('autoTheme') === 'true'
        if (autoTheme) {
          setTheme(e.matches ? 'dark' : 'light')
        }
      }
      
      mediaQuery.addEventListener('change', handleThemeChange)
      
      return () => {
        mediaQuery.removeEventListener('change', handleThemeChange)
      }
    }
  }

  return {
    currentTheme,
    setTheme,
    getTheme,
    initTheme,
    setupAutoTheme,
    watchSystemTheme
  }
}